<template>
    <div class="jianzhan-content">
        <Crumb name="Cost"></Crumb>
        <div class="content">
            <el-button type="primary" size="small" @click="dialogVisible = true">Add Cost</el-button>
            <div class="table-wrapper">
                <el-table
                        :data="costList"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="arrivePort"
                            label="Arrive Port"
                           >
                    </el-table-column>
                    <el-table-column
                            prop="arriveDateStr"
                            label="Arrive Date"
                            >
                    </el-table-column>
                    <el-table-column
                            prop="ship"
                            label="Ship">
                    </el-table-column>
                    <el-table-column
                            prop="bl"
                            label="BL">
                    </el-table-column>
                    <el-table-column
                            prop="invoice"
                            width="180px"
                            label="Invoice">
                    <template slot-scope="scope">
                        <div v-for="item in scope.row.invoice" :key="item">
                            <a :href="item" target="_blank">{{item | filterName}}</a>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column
                            prop="pibAju"
                            label="pib Aju">
                    </el-table-column>
                    <el-table-column
                            prop="pibAmount"
                            label="pib Amount">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog
                title="Cost"
                :visible.sync="dialogVisible"
                width="80%"
                >
            <el-form ref="form" :model="cost" label-width="100px" :rules="rule">
                <el-form-item label="Arrive Port" prop="arrivePort">
                    <el-input v-model="cost.arrivePort" placeholder="Arrive Port" size="small"></el-input>
                </el-form-item>
                <el-form-item label="Arrive Date" prop="arriveDateStr">
                    <el-date-picker v-model="cost.arriveDateStr" type="date" placeholder="Arrive Date" value-format="yyyy-MM-dd" size="small"></el-date-picker>
                </el-form-item>
                <el-form-item label="ship" prop="ship">
                    <el-input v-model="cost.ship" placeholder="Ship" size="small"></el-input>
                </el-form-item>
                <el-form-item label="Bl" prop="bl">
                    <el-input v-model="cost.bl" placeholder="Bl" size="small"></el-input>
                </el-form-item>
                <el-form-item label="pibAju" prop="pibAju">
                    <el-input v-model="cost.pibAju" placeholder="PibAju" size="small"></el-input>
                </el-form-item>
                <el-form-item label="pibAmount" prop="pibAmount">
                    <el-input v-model="cost.pibAmount" placeholder="pibAmount" size="small"></el-input>
                </el-form-item>
                <el-form-item label="invoice">
                    <label for="invoice" class="invoice">Upload invoice</label>
                    <input type="file" @change="fileChange" id="invoice" v-show="false">
                    <div v-for="item in fileList" :key="item">
                        <a :href="item" target="_blank">{{item | filterName}}</a>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="submitForm">Confirm</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import mixins from '../../util/mixins'
    import {addCost,getCostList} from "../../api/service";
    import {upLoadFiles} from "../../api";
    import {ERROR_OK} from "../../util/config";
    import {getFileName} from "../../util";

    export default {
        name: "cost",
        mixins:[mixins],
        filters:{
            filterName(name){
                return getFileName(name)
            }
        },
        data(){
            return {
                list:[],
                fileList:[],
                cost:{
                    arrivePort:'',
                    arriveDateStr:'',
                    ship:'',
                    bl:'',
                    invoice:'',
                    pibAju:'',
                    pibAmount:''
                },
                rule:{
                    arrivePort:[{required:true}],
                    arriveDateStr:[{required:true}],
                    ship:[{required:true}],
                    bl:[{required:true}],
                    invoice:[{required:true}],
                    pibAju:[{required:true}],
                    pibAmount:[{required:true}],
                },
                totalAmount:0,
                dialogVisible:false
            }
        },
        created(){
            this.getCostList();
        },
        computed:{
            costList(){
                return this.list.slice((this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize)
            }
        },
        methods:{
            clear(){
                this.cost = {
                    arrivePort:'',
                    arriveDateStr:'',
                    ship:'',
                    bl:'',
                    invoice:'',
                    pibAju:'',
                    pibAmount:''
                }
            },
            async fileChange(e){
                const formData = new FormData();
                Array.prototype.forEach.call(e.target.files,item=>{
                    formData.append('upload_file',item)
                });
                const {success,file_path} = await upLoadFiles(formData);
                if(success) {
                    this.fileList = this.fileList.concat(file_path);
                    this.cost.invoice = this.cost.invoice ? this.cost.invoice + ',' + file_path.join(',') : file_path.join(',')
                }
            },
            async getCostList(){
                const {status,data} = await getCostList();
                if (status === ERROR_OK) {
                    this.list = data.list;
                    this.totalAmount = data.total
                }
            },
            submitForm(){
                this.$refs.form.validate(async valid => {
                    if (valid) {
                        const {status,msg} = await addCost(this.cost);
                        if (status === ERROR_OK) {
                            this.$notify.success('Add Success');
                            this.dialogVisible = false;
                            this.clear();
                            this.getCostList()
                        } else {
                            this.$notify.error(msg)
                        }
                    }
                })
            },
        },
        components:{
            Crumb
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    @import "../../css/variable";
    .content{
        @include content
    }
    .invoice{
        background-color: $bg-theme;
        border-radius: $border-radius;
        height: 35px;
        line-height: 35px;
        color: white;
        padding: 5px 20px;
        cursor: pointer;
        &:active{
            color: $bg-theme;
            background-color: white;
            border: 1px solid $bg-theme;
        }
    }
</style>